<template>
    <div class="phone-card">
        <div class="left">
            <slot name="title"></slot>
            <slot name="description"></slot>
        </div>
        <div class="right"></div>
    </div>
</template>

<script>
    export default {
        name: "phoneCard",
        data() {
            return {};
        },
    };
</script>


<style scoped>
    .phone-card {
        display: flex;
        justify-content: center;
        border-radius: 12px;
        min-height: 540px;
        height: fit-content;
        border: 3px solid #DCDCDC;
        margin: 3%;
        background-color: white;
    }

    .left {
        width: 80%;
        display: flex;
        flex-direction: column;
        pointer-events: none;
    }

    .right {
        width: 20%;
        pointer-events: none;
    }
</style>